<template>
  <div style="padding: 10px 10px; display: flex">
    <el-form ref="form" :model="form" label-width="100px" label-position="left">
      <el-row>
        <el-col :span="12">
          <el-form-item label="病区" prop="deptId">
            <treeselect
              v-model="form.deptId"
              :options="deptOptions"
              :show-count="true"
              placeholder="请选择科室/病区"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="病历号" prop="medicalRecordNo">
            <el-input
              v-model="form.medicalRecordNo"
              placeholder="请输入病历号"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="床号" prop="bedNo">
            <el-input v-model="form.bedNo" placeholder="请输入床号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="监护分级" prop="guardianLevel">
            <el-select
              v-model="form.guardianLevel"
              placeholder="请选择监护分级"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in guardianLevel"
                :key="index"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="姓名" prop="patientName">
            <el-input v-model="form.patientName" placeholder="请输入患者姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="ID号" prop="patientNo">
            <el-input v-model="form.patientNo" placeholder="请输入ID号" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="性别" prop="patientSex">
            <el-select
              v-model="form.patientSex"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in userSex"
                :key="index"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄" prop="patientAge">
            <el-input v-model="form.patientAge" placeholder="请输入年龄" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="职业" prop="patientProfession">
            <el-input
              v-model="form.patientProfession"
              placeholder="请输入职业"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="民族" prop="nation">
            <el-input v-model="form.nation" placeholder="请输入民族" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="身高 (cm)" prop="patientHeight">
            <el-input v-model="form.patientHeight" placeholder="请输入身高" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="体重 (kg)" prop="patientWeight">
            <el-input v-model="form.patientWeight" placeholder="请输入体重" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="BMI (kg/m²)" prop="patientBmi">
            <el-input v-model="form.patientBmi" placeholder="请输入BMI" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="付费方式" prop="payWay">
            <el-select
              v-model="form.payWay"
              placeholder="请选择付费方式"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in payWay"
                :key="index"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="联系方式" prop="phoneNo">
            <el-input v-model="form.phoneNo" placeholder="请输入联系方式" />
          </el-form-item>
        </el-col>
      </el-row>
      <div style="text-align: center">
        <el-button
          :loading="buttonLoading"
          type="primary"
          @click="submitForm"
          style="background-color: #1292b9"
          >确 定</el-button
        >
      </div>
    </el-form>
    <div class="rightBox" style="width: 820px;">
      <div style="margin: 20px auto">
        <h2 style="text-align: center; font-weight: 900">药历首页</h2>
        <div class="mb20">
          <span class="headTxt">病区：</span
          ><span class="value">{{ form.deptId }}</span>
          <span class="headTxt">病历号：</span
          ><span class="value">{{ form.medicalRecordNo }}</span>
          <span class="headTxt">床号：</span
          ><span class="value">{{ form.bedNo }}</span>
          <span class="headTxt">监护分级结果：</span
          ><span class="value">{{ form.guardianLevel }}</span>
        </div>

        <table border="1" cellspacing="0" align="center" width="820px">
          <tr a>
            <th width="100" height="40" align="center">姓名</th>
            <td width="100" height="40" align="center">
              {{ form.patientName }}
            </td>
            <th width="100" height="40" align="center">性别</th>
            <td width="100" height="40" align="center">
              {{ form.patientSex }}
            </td>
            <th width="100" height="40" align="center">年龄</th>
            <td width="100" height="40" align="center">
              {{ form.patientAge }}
            </td>
            <th width="100" height="40" align="center">职业</th>
            <td width="100" height="40" align="center">
              {{ form.patientProfession }}
            </td>
            <th width="100" height="40" align="center">民族</th>
            <td width="100" height="40" align="center">{{ form.nation }}</td>
          </tr>
          <tr>
            <th width="100" height="40" align="center">身高(cm)</th>
            <td width="100" height="40" align="center">
              {{ form.patientHeight }}
            </td>
            <th width="100" height="40" align="center">体重(kg)</th>
            <td width="100" height="40" align="center" colspan="2">
              {{ form.patientWeight }}
            </td>
            <th width="100" height="40" align="center">BMI(kg/m²)</th>
            <td width="100" height="40" colspan="2" align="center">
              {{ form.patientBmi }}
            </td>
            <th width="100" height="40" align="center">医保类型</th>
            <td width="100" height="40" align="center">{{ form.payWay }}</td>
          </tr>
          <tr>
            <th width="100" height="40" align="center">不良嗜好</th>
            <td width="100" height="40" colspan="9"></td>
          </tr>
          <tr>
            <th width="100" height="40" align="center">主诉</th>
            <td width="100" height="40" colspan="9"></td>
          </tr>
          <tr>
            <th width="100" height="40" align="center">
              现病史及现病史用药汇总
            </th>
            <td width="100" height="40" colspan="9"></td>
          </tr>
          <tr>
            <th width="100" height="40" align="center">
              既往病史及既往病史用药汇总
            </th>
            <td width="100" height="40" colspan="9"></td>
          </tr>
          <tr>
            <th width="100" height="40" align="center">过敏史及处置史</th>
            <td width="100" height="40" colspan="9"></td>
          </tr>
          <tr>
            <th width="100" height="40" align="center">家族史</th>
            <td width="100" height="40" colspan="9"></td>
          </tr>
          <tr>
            <th width="100" height="40" align="center">个人史</th>
            <td width="100" height="40" colspan="9">
              <el-input
                v-model="input"
                placeholder="出生地,居住地,职业,婚育史等"
              ></el-input>
            </td>
          </tr>
          <tr>
            <th width="100" height="40" align="center">入院诊断</th>
            <td width="100" height="40" colspan="9"></td>
          </tr>
          <tr>
            <th width="100" height="40" align="center">初始药物治疗方案汇总</th>
            <td width="100" height="40" colspan="9">
              <table border="1" cellspacing="0" align="center">
                <tr>
                  <th>用药目的</th>
                  <th>药物名称(通用名称)</th>
                  <th>用法用量</th>
                  <th>起始日期</th>
                </tr>
                <tr>
                  <td width="100" height="40"></td>
                  <td width="100" height="40"></td>
                  <td width="100" height="40"></td>
                  <td width="100" height="40"></td>
                </tr>
                <tr>
                  <td width="100" height="40"></td>
                  <td width="100" height="40"></td>
                  <td width="100" height="40"></td>
                  <td width="100" height="40"></td>
                </tr>
                <tr>
                  <td width="100" height="40"></td>
                  <td width="100" height="40"></td>
                  <td width="100" height="40"></td>
                  <td width="100" height="40"></td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <th width="100" height="40" align="center">药学评估结果</th>
            <td width="100" height="40" colspan="9">
              <div class="r pl5">
                <div class="b" style="width: 235px">患者一般情况评估结果：</div>
                <el-input v-model="input" placeholder=""></el-input>
              </div>
              <div class="r pl5">
                <div class="b" style="width: 235px">患者生活方式评估结果：</div>
                <el-input v-model="input" placeholder=""></el-input>
              </div>
              <div class="r pl5">
                <div class="b" style="width: 265px">
                  既往用药依从性评估结果：
                </div>
                <el-input v-model="input" placeholder=""></el-input>
              </div>
              <div class="r pl5">
                <div class="b" style="width: 235px">一般医药知识评估结果：</div>
                <el-input v-model="input" placeholder=""></el-input>
              </div>
              <div class="r pl5">
                <div class="b" style="width: 138px">药学评估结论：</div>
                <el-input v-model="input" placeholder=""></el-input>
              </div>
            </td>
          </tr>
          <tr>
            <th width="100" height="40" align="center">药学监护计划</th>
            <td width="100" height="40" colspan="9">
              <div class="b">药学监护计划</div>
              <div class="b">
                (1)病情变化
                <el-input
                  v-model="input"
                  placeholder="（注：从患者疾病的临床表现（症状、体征）的变化包括中医望闻问切诊内容，辅助检查结果，等指标情况确定有效性和安全性的监护时间和方法等。用药期间有无新发症状是否与药物存在相关性等安全性。）"
                ></el-input>
              </div>
              <div class="b">
                (2)合理用药情况
                <el-input
                  v-model="input"
                  placeholder="（注：主要记录患者住院医嘱前置审核中需要医师双签的内容及个体化给药相关检测结果（如血药浓度监测和基因检测）并做简要分析评价。）"
                ></el-input>
              </div>
              <div class="b">
                (3)医保费用情况
                <el-input
                  v-model="input"
                  placeholder="（注:统计患者药物治疗方案中各类药物的费用占比情况，包括药品使用金额占比和自费药品使用金额占比。）"
                ></el-input>
              </div>
              <div class="b">
                (4)其他药事管理指标
                <el-input
                  v-model="input"
                  placeholder="（注：重点汇总分析每位患者治疗过程中的药物治疗方案是否满足医疗机构各项药事管理指标的要求）"
                ></el-input>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
  listUser,
  getUser,
  delUser,
  addUser,
  updateUser,
  resetUserPwd,
  changeUserStatus,
  deptTreeSelect,
} from "@/api/system/user";
import { getDicts } from "@/api/system/dict/data";
import {
  getBaseInfo,
  addBaseInfo,
  updateBaseInfo,
  leave,
} from "@/api/workstation/baseInfo";
export default {
  name: "yaoLiShouYe",
  components: { Treeselect },
  data() {
    return {
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        id: [{ required: true, message: "患者ID不能为空", trigger: "blur" }],
        patientName: [
          { required: true, message: "患者姓名不能为空", trigger: "blur" },
        ],
        medicalRecordNo: [
          { required: true, message: "病历号不能为空", trigger: "blur" },
        ],
        patientNo: [
          { required: true, message: "ID号不能为空", trigger: "blur" },
        ],
        deptId: [
          { required: true, message: "科室/病区不能为空", trigger: "blur" },
        ],
        admissionDate: [
          { required: true, message: "入院时间不能为空", trigger: "blur" },
        ],
        doctorId: [
          { required: true, message: "主管医生不能为空", trigger: "blur" },
        ],
        bedNo: [{ required: true, message: "床号不能为空", trigger: "blur" }],
        firstDiagnose: [
          { required: true, message: "第一诊断不能为空", trigger: "blur" },
        ],
        guardianLevel: [
          { required: true, message: "监护分级不能为空", trigger: "blur" },
        ],
        patientState: [
          { required: true, message: "住院状态不能为空", trigger: "blur" },
        ],
        patientSex: [
          { required: true, message: "患者性别不能为空", trigger: "blur" },
        ],
        patientAge: [
          { required: true, message: "年龄不能为空", trigger: "blur" },
        ],
        patientProfession: [
          { required: true, message: "职业不能为空", trigger: "blur" },
        ],
        nation: [{ required: true, message: "民族不能为空", trigger: "blur" }],
        patientHeight: [
          { required: true, message: "身高不能为空", trigger: "blur" },
        ],
        patientWeight: [
          { required: true, message: "体重不能为空", trigger: "blur" },
        ],
        patientBmi: [
          { required: true, message: "BMI不能为空", trigger: "blur" },
        ],
        phoneNo: [
          { required: true, message: "联系方式不能为空", trigger: "blur" },
        ],
        payWay: [
          { required: true, message: "付费方式不能为空", trigger: "blur" },
        ],
        sourceInfo: [
          { required: true, message: "数据来源不能为空", trigger: "blur" },
        ],
      },
      // 部门树选项
      deptOptions: [],
      // 按钮loading
      buttonLoading: false,
      guardianLevel: [], // 监护分级
      patientState: [], // 住院状态
      userSex: [], // 患者性别
      payWay: [], // 付费方式
      id: undefined, // 患者ID
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.getDeptTree();
    // 字典查询  监护分级
    getDicts("guardian_level").then((res) => {
      // console.log(res.data);
      this.guardianLevel = res.data;
    });
    // 字典查询  住院状态
    getDicts("patient_state").then((res) => {
      // console.log(res.data);
      this.patientState = res.data;
    });
    // 字典查询  患者性别
    getDicts("sys_user_sex").then((res) => {
      // console.log(res.data);
      this.userSex = res.data;
    });
    // 字典查询  付费方式
    getDicts("pay_way").then((res) => {
      // console.log(res.data);
      this.payWay = res.data;
    });
    this.getBaseInfo();
  },
  methods: {
    // 获取详细信息
    getBaseInfo() {
      getBaseInfo(this.id).then((res) => {
        console.log("[ res.data ] >", res.data);
        this.form = res.data;
      });
    },
    /** 查询科室下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.id != null) {
            updateBaseInfo(this.form)
              .then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getBaseInfo();
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          } else {
            addBaseInfo(this.form)
              .then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          }
        }
      });
    },
  },
};
</script>

<style></style>
